﻿@page "/admin/settings/image"
@section scripts {
    <script type="module">
        import * as settings from '/js/app/admin.settings.module.js';

        const form = document.querySelector('#form-settings');
        form.addEventListener('submit', settings.handleSettingsSubmit);
    </script>
}
@{
    var settings = BlogConfig.ImageSettings;
}

@section admintoolbar{
    <partial name="_SettingsHeader" />
}

<form id="form-settings" asp-controller="Settings" asp-action="Image">
    <div class="admin-settings-entry-container">
        <div class="row">
            <div class="col-lg-6">
                <div class="mb-4">
                    <h4 class="admin-subtitle fw-bold mb-2">
                        @SharedLocalizer["General"]
                    </h4>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-fullscreen settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.FitImageToDevicePixelRatio" class="form-check-label"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <div class="form-check form-switch form-control-lg">
                                <input type="hidden" name="FitImageToDevicePixelRatio" value="false">
                                <input type="checkbox" name="FitImageToDevicePixelRatio" value="true" class="form-check-input" @(settings.FitImageToDevicePixelRatio ? "checked" : null)>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="admin-subtitle fw-bold mb-2">
                        CDN
                    </h4>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-globe settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.EnableCDNRedirect" class="form-check-label"></label>
                        </div>
                        <div class="col-md-5 text-end">
                            <div class="form-check form-switch form-control-lg">
                                <input type="hidden" name="EnableCDNRedirect" value="false">
                                <input type="checkbox" name="EnableCDNRedirect" value="true" class="form-check-input" @(settings.EnableCDNRedirect ? "checked" : null)>
                            </div>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-link settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.CDNEndpoint"></label>
                            <div class="form-text">e.g. https://cdn.edi.wang/ediwang-images</div>
                        </div>
                        <div class="col-md-5">
                            <input asp-for="@settings.CDNEndpoint" class="form-control" />
                        </div>
                    </div>

                    <div class="text-muted">* Recommend to use <a href="https://learn.microsoft.com/en-us/azure/cdn/cdn-overview?WT.mc_id=AZ-MVP-5002809" target="_blank">Azure CDN</a></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div>
                    <h4 class="admin-subtitle fw-bold mb-2">
                        @SharedLocalizer["Watermark"]
                    </h4>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-file-earmark-font settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.IsWatermarkEnabled" class="form-check-label"></label>
                            <div class="form-text">
                                Watermark will be placed at the right bottom corner of the image
                            </div>
                        </div>
                        <div class="col-md-5 text-end">
                            <div class="form-check form-switch form-control-lg">
                                <input type="hidden" name="IsWatermarkEnabled" value="false">
                                <input type="checkbox" name="IsWatermarkEnabled" value="true" class="form-check-input" @(settings.IsWatermarkEnabled ? "checked" : null)>
                            </div>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-images settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.KeepOriginImage" class="form-check-label"></label>
                            <div class="form-text">
                                Also save the origin image as a backup while adding watermark
                            </div>
                        </div>
                        <div class="col-5 text-end">
                            <div class="form-check form-switch form-control-lg">
                                <input type="hidden" name="KeepOriginImage" value="false">
                                <input type="checkbox" name="KeepOriginImage" value="true" class="form-check-input" @(settings.KeepOriginImage ? "checked" : null)>
                            </div>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-input-cursor-text settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.WatermarkText"></label>
                        </div>
                        <div class="col-5">
                            <input asp-for="@settings.WatermarkText" class="form-control" />
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-input-cursor-text settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.WatermarkSkipPixel"></label>
                            <div class="form-text">
                                Add watermark only when image pixcel (HxW) is greater than this value.
                            </div>
                        </div>
                        <div class="col-5">
                            <input asp-for="@settings.WatermarkSkipPixel" required min="0" max="@int.MaxValue" class="form-control" />
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-palette settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label>Alpha</label>
                            <div class="form-text">
                                Transparency value (0-255).
                            </div>
                        </div>
                        <div class="col-5">
                            <div class="row g-1">
                                <div class="col">
                                    <input asp-for="@settings.WatermarkColorA" required min="0" max="255" class="form-control" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
                        <div class="col-auto">
                            <i class="bi-fonts settings-entry-icon"></i>
                        </div>
                        <div class="col">
                            <label asp-for="@settings.WatermarkFontSize"></label>
                        </div>
                        <div class="col-md-5">
                            <input asp-for="@settings.WatermarkFontSize" min="8" max="32" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="admin-settings-action-container border-top pt-2 mt-2">
        <input id="btn-save-settings" type="submit" value="@SharedLocalizer["Save"]" class="btn btn-outline-accent" />
    </div>
</form>
